

 //0.获取元素
 let content = document.querySelector(".content");

 // console.log(list);
 //1.渲染页面
 //1-1 准备一个函数
  bindHTML();
    function bindHTML() {
   //1-4 根据需求 需要计算一些东西
   var totalPrice = 0, //总价格
     totalNum = 0, //总数量
     selectNum = 0; //已经选择几个多选框
   list.forEach(function (item) {
     //统计选中的数量/总价
     if (item.select === true) {
       totalPrice += item.price * item.buy_num;
       totalNum += item.buy_num;
       selectNum++;
     }
 
     // selectNum
   });
 
   //1-2 准备渲染
   //顶部的全选按钮
   //如果已选的数量>=原始数组的长度 全选就得选中
   var str = `
   <div class="top">
     <input type="checkbox" class="select_all" ${
       selectNum >= list.length ? "checked" : ""
     }> 全选
   </div>
   <ul class="center">`;
 
   //购物车列表
   //1-3 根据数组生成li
   list.forEach(function (item) {
     //这里要用到id属性，data-id绑定自定义id属性，这样就可以知道我操作的是哪一个具体的商品
     str += ` 
     <li>
       <div class="select">
         <input data-id="${item.id}" type="checkbox" class="select_one" 
         ${item.select ? "checked" : ""} />
       </div>
       <div class="pic">
         <img src="${item.pic}" alt="" />
       </div>
       <div class="name">${item.name}</div>
       <div class="price">￥ <span>${(item.price - 0).toFixed(2)}</span></div>
       <div class="number">
         <button data-id="${item.id}" class="sub">-</button>
         <input type="text" value="${item.buy_num}" />
         <button data-id="${item.id}" class="add">+</button>
       </div>
       <div class="subtotal">￥ <span>${(item.price * item.buy_num).toFixed(
         2
       )}</span></div>
       <div class="del">
         <button data-id="${item.id}" class="del_btn">删除</button>
       </div>
   </li>`;
   });
   //购物车的尾部
   str += ` 
   </ul>
   <div class="bottom">
     <p>总购买数量: ${totalNum}</p>
     <p>
       <button data-price="${totalPrice.toFixed(2)}" class="pay">去结算</button>
       <button class="clear">清空购物车</button>
       <button class="clear_select">删除所有已选中</button>
       <button class="list">返回列表页</button>
     </p>
     <p>总价格 : ￥ <span>${totalPrice.toFixed(2)}</span></p>
   </div>`;
   //整个str准备完毕啦
   //把str放到content中
   content.innerHTML = str;
 }
 
 //2.绑定事件
   content.addEventListener("click",  function (e) {
   var target = e.target;
   //通过target来判断你点的是那个按钮
 
   //判断全选
   if (target.className === "select_all") {
     //1.拿到自己是true还是false
     //自己是什么？
     console.log(target.checked);
     var type = target.checked; //拿到自己是否选中
     list.forEach(function (item) {
       //2.赋值
       item.select = type;
     });
     //3.重新渲染页面
     bindHTML();
   }
   //勾选单个
   //判断点击的是单个的商品按钮
   if (target.className === "select_one") {
     //1. 知道自己要修改的是数组中的那一条属性
     //在渲染的时候，已经把id这条属性 放上去了 data-id
     //如果你想让整个购物车结构联动,必须要修改list里面的数据然后重新渲染
     //该改那一条数据？
     //你点的 是  第一个 li   改数组里面的第一个数据
     var id = target.dataset.id - 0;
     // console.log(id);
     //找出来？
     var goods = list.find(function (item) {
       return item.id === id;
     });
     //2.取反
     goods.select = !goods.select;
     //3.重新渲染页面
     bindHTML();
   }
   //数量减少按钮
   if (target.className === "sub") {
     //1.拿到自己身上记录的id
     var id = target.dataset.id - 0;
     //2.找到指定的数据
     var goods = list.find(function (item) {
       return item.id === id;
     });
     //让购买数量—1
     //边界判断
     if (goods.buy_num <= 1) return;
     goods.buy_num--;
     //3.渲染页面
     bindHTML();
   }
   //加按钮
   if (target.className === "add") {
     //1.拿到自己身上记录的id
     var id = target.dataset.id - 0;
     //2.找到指定的数据
     var goods = list.find(function (item) {
       return item.id === id;
     });
     //让购买数量+1
     //边界判断  购买数量不能大于库存数量
     if (goods.buy_num >= goods.number) return;
     goods.buy_num++;
     //3.渲染页面
     bindHTML();
   }
   //删除
   //判断点击的是删除按钮
   if (target.className === "del_btn") {
     //1.拿到自己的id
     var id = target.dataset.id - 0;
     //2.从list数组中删除 id对应的那个对象
     //filter
     list = list.filter(function (item) {
       return item.id !== id;
     });
     //3.渲染页面
     bindHTML();
   }
   //去结算
   if (target.className === "pay") {
     //1.拿到总价
     var price = target.dataset.price - 0;
     //2.弹窗一下
     window.alert(`给我 ${price.toFixed(2)}元人民币`);
   }
   //判断点击的是清空购物车
   if (target.className === "clear") {
     //1.list置空
     list = [];
     //2.重新渲染
     bindHTML();
   }
   //判断点击的是返回商品列表
   if (target.className === "list") {
     window.location.href = "https://www.jd.com";
   }
   //删除选中
   if (target.className === "clear_select") {
     //把list里面 select属性 为true的删除
     // 把list里面 select属性 为false 的 留下来
     list = list.filter(function (item) {
       return item.select === false;
     });
     //渲染页面
     bindHTML();
   }
 });

 
   





